import 'package:flutter/material.dart';
import 'package:hm_show_flutter/entity/category_parent_entity.dart';

typedef OnClickCategory(List<CategoryParentDataListCategory> data);

class CategoryParentView extends StatefulWidget {
  final List<CategoryParentDataList> _listParent;
  final OnClickCategory _onClickCategory;

  CategoryParentView(
      List<CategoryParentDataList> listParent, OnClickCategory onClickCategory)
      : this._listParent = listParent,
        this._onClickCategory = onClickCategory;

  @override
  _CategoryParentViewState createState() => _CategoryParentViewState();
}

class _CategoryParentViewState extends State<CategoryParentView> {
  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: ListView.builder(
            itemCount: widget._listParent.length,
            itemBuilder: (BuildContext context, int index) {
              return _categoryItemView(widget._listParent[index], index);
            }));
  }

  Widget _categoryItemView(CategoryParentDataList data, int index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectIndex = index;
        });
        widget._onClickCategory(data.category);
      },
      child: Container(
          width: 100.0,
          height: 50.0,
          color: Colors.white,
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Container(
                height: 48,
                color: index == _selectIndex ? Colors.grey[100] : Colors.white,
                alignment: Alignment.center,
                child: Text(data.title,
                    style: index == _selectIndex
                        ? TextStyle(
                            fontSize: 14.0, color: Colors.red)
                        : TextStyle(fontSize: 14.0, color: Colors.black54)),
              ),
              index == _selectIndex
                  ? Divider(
                      height: 2.0,
                      color: Colors.red,
                    )
                  : Divider(
                      color: Colors.white,
                      height: 1.0,
                    )
            ],
          )),
    );
  }
}
